<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>level</title>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="./css/demo.css">
  <style>
    body {
      margin: 40px;
    }

  </style>
</head>

<body>
  <div class="snippet">
    <nav class="level">
      <!-- Left side -->
      <div class="level-left">
        <div class="level-item">
          <p class="subtitle is-5">
            <strong>123</strong> posts
          </p>
        </div>
        <div class="level-item">
          <div class="field has-addons">
            <p class="control">
              <input class="input" type="text" placeholder="Find a post">
            </p>
            <p class="control">
              <button class="button">
                Search
              </button>
            </p>
          </div>
        </div>
      </div>

      <!-- Right side -->
      <div class="level-right">
        <p class="level-item">
          <strong>All</strong>
        </p>
        <p class="level-item">
          <a>Published</a>
        </p>
        <p class="level-item">
          <a>Drafts</a>
        </p>
        <p class="level-item">
          <a>Deleted</a>
        </p>
        <p class="level-item">
          <a class="button is-success">New</a>
        </p>
      </div>
    </nav>
  </div>
  <h2>centered level</h2>
  <div class="snippet">
    <nav class="level">
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Tweets</p>
          <p class="title">3,456</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Following</p>
          <p class="title">123</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Followers</p>
          <p class="title">456K</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Likes</p>
          <p class="title">789</p>
        </div>
      </div>
    </nav>
  </div>

  <div class="snippet">
    <nav class="level">
      <p class="level-item has-text-centered">
        <a class="link is-info">Home</a>
      </p>
      <p class="level-item has-text-centered">
        <a class="link is-info">Menu</a>
      </p>
      <p class="level-item has-text-centered">
        <img src="https://bulma.io/images/bulma-type.png" alt="" style="height: 30px;">
      </p>
      <p class="level-item has-text-centered">
        <a class="link is-info">Reservations</a>
      </p>
      <p class="level-item has-text-centered">
        <a class="link is-info">Contact</a>
      </p>
    </nav>
  </div>

  <h4>
    by default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well,
    add
    <code>is-mobile</code> modifier on level container
  </h4>
  <div class="snippet">
    <nav class="level is-mobile">
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Tweets</p>
          <p class="title">3,456</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Following</p>
          <p class="title">123</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Followers</p>
          <p class="title">456K</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">Likes</p>
          <p class="title">789</p>
        </div>
      </div>
    </nav>
  </div>

</body>

</html>
